import { GetUserListParams } from "@/api";
import { Button, Input } from "antd";
import { memo, type ChangeEvent, type FC, type ReactNode } from "react";

interface IProps {
  children?: ReactNode;
  query: string;
  getUserListData: (params: GetUserListParams) => void;
  queryChange: (e: ChangeEvent<HTMLInputElement>) => void;
  setTitle: (title: string) => void;
  setOpen: (open: boolean) => void;
  resetQuery:()=>void
}
const inputStyle = { width: 500, marginRight: 10 };

const SearchAddBtn: FC<IProps> = memo(({
  query,
  getUserListData,
  queryChange,
  setTitle,
  setOpen,
  resetQuery
}) => {
  const handleSearch = (value: string) => {
    getUserListData({ pagenum: 1, pagesize: 2, query: value });
  };

  const handleAddUser = () => {
    setTitle("添加用户");
    setOpen(true);
  };

  return (
    <>
      <Input.Search
        onChange={queryChange}
        value={query}
        style={inputStyle}
        className="customSearch"
        size="large"
        placeholder="请输入内容"
        enterButton
        onSearch={handleSearch}
      />
      <Button
        style={{ marginRight: 10 }}
        onClick={handleAddUser}
        size="large"
        type="primary"
      >
        添加用户
      </Button>
      <Button onClick={resetQuery} size="large" type="primary">
        重置查询
      </Button>
    </>
  );
});

export default SearchAddBtn;
